<template>
<div class="login-container">
  <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
    <div class="title-container">
      <img class="logo" src="@/assets/logo.png" alt="" />
      <h3 class="title">协会后台</h3>
    </div>
    <div>
      <el-form-item prop="username">
        <img class="svg-container" src="@/assets/ic_sign_user@2x.png" />
        <el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号/邮箱" name="username" type="text" tabindex="1" auto-complete="on" />
      </el-form-item>
      <el-form-item prop="password" v-if="!show">
        <img class="svg-container" src="@/assets/ic_sign_password@2x.png" />
        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入登录密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
      </el-form-item>
      <el-form-item prop="verifyCode" v-if="show">
        <img class="svg-container" src="@/assets/ic_sign_password@2x.png" />
        <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码" name="verifyCode" tabindex="2" />
        <el-button type="text" class="code" v-show="Verification" @click="handleClick">发送验证码</el-button>
        <el-button type="text" class="code-time" v-show="!Verification"><span>{{timer}}</span>s</el-button>
      </el-form-item>
      <el-button class="login-btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
      <!-- <el-button class="login-btn" v-if="show" :loading="loading" type="primary">登录</el-button> -->
      <div class="bottom-btn">
        <span class="button-text" v-if="!show" @click="show = !show">验证码登录</span>
        <span class="button-text" v-if="show" @click="show = !show">密码登录</span>
        <span class="button-text" @click="handRegister">免费注册</span>
      </div>
      <div class="bottom-line">
        第三方账号登录
      </div>
    </div>
    <div class="ic">
      <div><img class="ic-img" src="@/assets/ic_circle_wechat@2x.png" /></div>
      <div><img class="ic-img" src="@/assets/ic_circle_weibo@2x.png" /></div>
      <div><img class="ic-img" src="@/assets/ic_circle_qq@2x.png" /></div>
    </div>
  </el-form>
</div>
</template>

<script>
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入正确密码"));
      } else {
        callback();
      }
    };
    return {
      show: false,
      loginForm: process.env.NODE_ENV === "development" ? {
        username: "admin",
        password: "123456",
      } : {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{
          required: true,
          trigger: "blur",
          validator: validateUsername,
        }, ],
        password: [{
          required: true,
          trigger: "blur",
          validator: validatePassword,
        }, ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      Verification: true, //通过v-show控制显示获取还是倒计时
      timer: 60 //定义初始时间为60s
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    // 验证手机号
    checkPhoneNumber() {
      let reg = /^1[3456789]\d{9}$/
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (regEmail.test(this.loginForm.username) || reg.test(this.loginForm.username)) { 
        return true
      }
      this.$message.warning("请输入正确的手机号码或邮箱")
      return false
    },
    // 验证码获取
    handleClick() {
      if (!this.checkPhoneNumber(this.loginForm.username)) {
        return;
      } else {
        this.Verification = false;
        let auth_timer = setInterval(() => {
          this.timer--;
          if (this.timer <= 0) {
            this.Verification = true;
            clearInterval(auth_timer)
            this.timer = 60;
          }
        }, 1000)
      }

    },
    // 登录
    handleLogin() {
      if(this.show){
        this.$message.warning("短信服务暂未开通")
        return 
      }
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$router.push({ path: '/' })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handRegister() {
      this.$router.push({
        name: "register",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$theme: #dd8045;

/deep/ .el-form-item {
  margin-bottom: 30px;
}

.login-container {
  position: relative;
  height: 100%;
  width: 100%;
  min-width: 1080px;
  min-height: 720px;
  overflow: hidden;
  background: url("~@/assets/2040188.jpg") no-repeat;
  background-size: cover;

  /deep/ .el-form-item__content {
    display: flex;
    align-items: center;

    input {
      height: 58px;
      width: 350px;
      background: #ffffff;
      // color: #cccccc;
      font-size: 16px;
      font-weight: 400;
      padding-left: 70px;
      border: 1px solid #cadef7;
    }
  }

  .login-form {
    // width: 400px;
    height:630px;
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background: #DEA065;
    border: 1px solid #eccdb0;
  }

  .svg-container {
    position: absolute;
    width: 19px;
    height: 22px;
    display: inline-block;
    left: 29px;
    z-index: 99;
  }

  .title-container {
    position: relative;
    text-align: center;
    margin-bottom: 30px;

    .logo {
      width: 101px;
      height: 101px;
      border-radius: 50%;
      pointer-events: none;
    }

    .title {
      font-size: 24px;
      color: $theme;
      font-weight: 500;
      margin: 10px auto 20px auto;
    }
  }

  .code {
    position: absolute;
    left: 250px;
    top: 10px;
    z-index: 1;
    font-size: 14px;
    color: #dd8045;
    cursor: pointer;
  }

  .code-time {
    position: absolute;
    left: 280px;
    top: 10px;
    z-index: 1;
    font-size: 14px;
    color: #dd8045;
    cursor: pointer;
  }

  .login-btn {
    display: block;
    width: 350px;
    height: 58px;
    border: 1px solid #cadef7;
    box-shadow: 0px 6px 13px 0px rgba(51, 104, 192, 0.21);
    border-radius: 2px;
    margin-top: 40px;
    background-color: $theme;
    font-size: 16px;
    font-weight: 500;
    color: #fefefe;

    &:hover {
      background-color: #e67733;
    }
  }

  .bottom-btn {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;

    .button-text {
      cursor: pointer;
      font-size: 16px;
      font-weight: 400;
      text-decoration: underline;
      color: #dd8045;
    }

    .button-text:hover {
      color: #e67733;
    }

  }

  .bottom-line {
    margin-top: 30px;
    position: relative;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    color: #C8C8C8;
  }

  .bottom-line::before,
  .bottom-line::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    background: #ccc;
    top: 50%;
  }

  .bottom-line::before {
    margin-left: -10px;
    transform: translateX(-100%);
  }

  .bottom-line::after {
    margin-left: 10px;
  }

  .ic {
    display: flex;
    flex-direction: row;
    padding-left: 50px;
    padding-top: 32px;

    .ic-img {
      width: 58px;
      height: 58px;
      margin-right: 48px
    }
  }
}
</style>
